import React from 'react'
import EchartsOne from "./EchartsOne"
import EchartsTwo from "./EchartsTwo"
import TableView from "./TableView"
import {Row, Col} from 'antd'
import styles from "./Dashboard.module.less"

const Dashboard: React.FC = () => {
    return (
        <div className={styles.dashboard}>
            <Row gutter={16}>
                <Col className={styles.gutterRow} span={6}>
                    <div className={styles.left}>
                        <span className={styles.titleOne}>需求人数</span>
                        <span className={styles.titleTwo}>3600</span>
                        <span className={styles.titleThree}>+88%</span>
                    </div>
                    <div className={styles.right}>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
                             baseProfile="full" width="138" height="60"
                        >
                            <rect width="138" height="60" x="0" y="0" fill="none"></rect>
                            <g>
                                <g clip-path="url(#zr0-c0)">
                                    <path
                                        d="M9.8571 48.1819C9.8571 48.1819 18.4477 30.255 29.5714 30.255C38.162 30.255 39.3198 36.1556 49.2857 36.1556C59.0341 36.1556 59.611 35.4548 69 32.0887C79.3253 28.387 78.7231 22.02 88.7143 22.02C98.4374 22.02 98.9794 30.705 108.4286 30.705C118.6937 30.705 128.1429 18.0938 128.1429 18.0938"
                                        fill="transparent" stroke="#41b6ff" stroke-width="2" stroke-linejoin="bevel"
                                        filter="url(#zr0-s0)"></path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="zr0-c0">
                                    <path d="M-1 14l140 0l0 47l-140 0Z" fill="#000"></path>
                                </clipPath>
                                <filter id="zr0-s0" x="-100%" y="-100%" width="300%" height="300%">
                                    <feDropShadow dx="0" dy="3" stdDeviation="3.5 3.5" flood-color="#41b6ff"
                                                  flood-opacity="1"></feDropShadow>
                                </filter>
                            </defs>
                        </svg>
                    </div>
                </Col>
                <Col className={styles.gutterRow} span={6}>
                    <div className={styles.left}>
                        <span className={styles.titleOne}>需求人数</span>
                        <span className={styles.titleTwo}>3600</span>
                        <span className={styles.titleThree}>+88%</span>
                    </div>
                    <div className={styles.right}>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
                             baseProfile="full" width="138" height="60"
                        >
                            <rect width="138" height="60" x="0" y="0" fill="none"></rect>
                            <g>
                                <g clip-path="url(#zr1-c0)">
                                    <path
                                        d="M9.8571 40.056C9.8571 40.056 19.1951 49.668 29.5714 49.668C38.9094 49.668 39.5322 48.705 49.2857 48.705C59.2465 48.705 62.5345 52.908 69 52.908C82.2488 52.908 77.6567 16.611 88.7143 16.611C97.3709 16.611 98.0831 42.243 108.4286 42.243C117.7974 42.243 128.1429 20.589 128.1429 20.589"
                                        fill="transparent" stroke="rgb(232,95,51)" stroke-width="2"
                                        stroke-linejoin="bevel" filter="url(#zr1-s0)"></path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="zr1-c0">
                                    <path d="M-1 14l140 0l0 47l-140 0Z" fill="#000"></path>
                                </clipPath>
                                <filter id="zr1-s0" x="-100%" y="-100%" width="300%" height="300%">
                                    <feDropShadow dx="0" dy="3" stdDeviation="3.5 3.5" flood-color="#e85f33"
                                                  flood-opacity="1"></feDropShadow>
                                </filter>
                            </defs>
                        </svg>
                    </div>
                </Col>
                <Col className={styles.gutterRow} span={6}>
                    <div className={styles.left}>
                        <span className={styles.titleOne}>需求人数</span>
                        <span className={styles.titleTwo}>3600</span>
                        <span className={styles.titleThree}>+88%</span>
                    </div>
                    <div className={styles.right}>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
                             baseProfile="full" width="138" height="60"
                        >
                            <rect width="138" height="60" x="0" y="0" fill="none"></rect>
                            <g>
                                <g clip-path="url(#zr2-c0)">
                                    <path
                                        d="M9.8571 50.3138C9.8571 50.3138 21.9795 50.3138 29.5714 48.7275C41.6938 46.1947 38.4364 24.0562 49.2857 24.0562C58.1507 24.0562 59.8019 40.7062 69 40.7062C79.5162 40.7062 77.8884 18.7575 88.7143 18.7575C97.6027 18.7575 98.5436 32.8312 108.4286 32.8312C118.2579 32.8312 128.1429 18.9937 128.1429 18.9937"
                                        fill="transparent" stroke="rgb(38,206,131)" stroke-width="2"
                                        stroke-linejoin="bevel" filter="url(#zr2-s0)"></path>
                                </g>
                            </g>
                            <defs>
                                <clipPath id="zr2-c0">
                                    <path d="M-1 14l140 0l0 47l-140 0Z" fill="#000"></path>
                                </clipPath>
                                <filter id="zr2-s0" x="-100%" y="-100%" width="300%" height="300%">
                                    <feDropShadow dx="0" dy="3" stdDeviation="3.5 3.5" flood-color="#26ce83"
                                                  flood-opacity="1"></feDropShadow>
                                </filter>
                            </defs>
                        </svg>
                    </div>
                </Col>
                <Col className={styles.gutterRow} span={6}>
                    <div className={styles.left}>
                        <span className={styles.titleOne}>需求人数</span>
                        <span className={styles.titleTwo}>3600</span>
                        <span className={styles.titleThree}>+88%</span>
                    </div>

                    <div className={styles.right}>
                        <svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1"
                             baseProfile="full" width="138" height="60"
                        >
                            <rect width="138" height="60" x="0" y="0" fill="none"></rect>
                            <g>
                                <path d="M98.5 30A29.5 29.5 0 1 1 98.5 29.9971M96.5 30A27.5 27.5 0 1 0 96.5 30.0027Z"
                                      fill="#dfe7ef"></path>
                                <path
                                    d="M69 0.5A29.5 29.5 0 1 1 68.9971 0.5A1 1 0 1 1 69 2.5A27.5 27.5 0 1 0 69.0027 2.5"
                                    fill="rgb(120,70,229)" filter="url(#zr3-s0)"></path>
                                <path d="M-27.25 -5l54.5 0l0 26l-54.5 0Z" transform="translate(69.86 23)"
                                      fill="rgb(0,0,0)" fill-opacity="0" stroke="#ccc" stroke-width="0"></path>
                                <text dominant-baseline="central" text-anchor="middle" y="8"
                                      transform="translate(69.86 23)" fill="#464646"
                                      style={{
                                          fontSize: '16px',
                                          fontFamily: '&quot;Microsoft YaHei&quot',
                                          fontWeight: '600',
                                      }}>100%
                                </text>
                            </g>
                            <defs>
                                <filter id="zr3-s0" x="-100%" y="-100%" width="300%" height="300%">
                                    <feDropShadow dx="0" dy="0" stdDeviation="1 1" flood-color="#7846e5"
                                                  flood-opacity="1"></feDropShadow>
                                </filter>
                            </defs>
                        </svg>
                    </div>
                </Col>
            </Row>
            <Row gutter={16}>
                <Col className="gutter-row" span={16}>
                    <EchartsOne></EchartsOne>
                </Col>
                <Col className="gutter-row" span={8}>
                    <EchartsTwo></EchartsTwo>
                </Col>
            </Row>
            <Row gutter={16}>

                <Col className="gutter-row" span={24}>
                    <TableView></TableView>
                </Col>
            </Row>
        </div>
    )
}
export default Dashboard